<script setup lang="ts">
import { computed, toRefs, unref, ref } from "vue";
import { useCurrentData,useRootData } from "@/store/processFlow";
import panelContent from "./panelContent.vue";
//
const props = defineProps<{ data: any }>();
const { data } = toRefs(props);
//
const currentData = useCurrentData();
const currentIndex = ref(-1);
const statusIconPrefix = "/imgs/home/panel-status";
const status = computed(() => {
  const d = unref(data);
  const s = d.status;
  const t = s.aggregateSnapshot;
  return [
    // ['test',0],
    ['活动线程',t.activeThreadCount],
    ['总排队数据',`${t.flowFilesQueued} / ${Math.round(t.bytesQueued / 1024 / 1024 * 100) / 100} MB`,'w-130'],
    ['正在传输数据的远程处理组',d.inactiveRemotePortCount],
    ['未传输数据的远程处理组',d.activeRemotePortCount],
    ['运行中组件',d.runningCount],
    ['停止运行的组件',d.stoppedCount],
    ['无效的组件',d.invalidCount],
    ['禁用的组件',d.disabledCount],
    ['最新版版本化处理组',d.upToDateCount],
    ['本地修改的版本化处理组',d.locallyModifiedCount],
    ['过期的版本化处理组',d.staleCount],
    ['本地修改和过期的版本化处理组',d.locallyModifiedAndStaleCount],
    ['同步失败的版本化处理组',d.syncFailureCount],
    ['上次刷新时间',s.statsLastRefreshed],
  ];
});
//
const isCollapse = computed(() => currentData.slideCollapse);
const isFullScreen = computed(() => currentData.isFullScreen)
//
const handleDetail = (item:any) => {
  handleActiveItem(item)
  currentData.resetIsDetail();
};
const handleFullScreen = (item:any) => {
  handleActiveItem(item)
  currentData.resetIsFullScreen();
};
//
const rootData = useRootData();
const handleActiveItem = (item:any) => {
  const list:any[] = rootData.getItemGroupList(item)
  currentData.resetActiveItem(item,list)
}
</script>

<template>
  <div b-solid b-1 b="#708479" left-0 top-0 rd-4 v-if="data" m-b-8 :class="[{'b-2 important-b-#2B7A4F b-l-4 panel-active':data.id == currentData.activeItem.id},{'is-full-screen':isFullScreen},{'is-collapse':isCollapse}]">
    <div
      h-52
      w-full
      box-border
      p-l-12
      p-r-14
      flex
      items-center
      justify-between
      b-b="1px solid #E1E7E4"
    >
      <div w-200 text-14 fw-600 c="#2B7A4F"  cursor-pointer :data-title="data?.status.name" @click="() => handleActiveItem(data)">
        <span inline-block w-full truncate>{{ data.status.name || "当前流程名称" }}</span>
      </div>
      <div flex justify-around flex-1>
        <span
          v-for="([t,s,c=''], i) in status"
          flex
          items-center
          :data-title="t + ' : ' + s"
          :class="c"
          @mouseenter="currentIndex = i"
          @mouseleave="currentIndex = -1"
        >
          <img
            v-show="currentIndex != i"
            w-16
            h-16
            :src="`${statusIconPrefix}-${i + 2}.png`"
          />
          <img
            v-show="currentIndex == i"
            w-16
            h-16
            :src="`${statusIconPrefix}-h-${i + 2}.png`"
          />
          <b  truncate text-16 c="#1D3C2B" m-l-2 fw-400>{{ s }}</b>
        </span>
      </div>
      <div ml-30 w-60 flex justify-between class="_panel-header-operate">
        <!-- 详情 全屏 报错 -->
        <span data-title="详情">
          <img
          w-16
          h-16
          cursor-pointer
          
          @click="() => handleDetail(data)"
          src="/imgs/home/panel-status-detail.png"
        />
        </span>
        <span data-title="全屏">
          <img
          w-16
          h-16
          cursor-pointer
          
          @click="() => handleFullScreen(data)"
          src="/imgs/home/panel-status-full.png"
        />
        </span>
        
        <!-- <img
          w-16
          h-16
          cursor-pointer
          title="报错"
          @click="handleError"
          src="/imgs/home/panel-status-error.png"
        /> -->
      </div>
    </div>
    <div
      v-if="data.id == currentData.activeItem.id"
      w-full
      p-l-12
      p-r-14
      p-y-16
      box-border
      class="_panel-content"
    >
      <panel-content></panel-content>
    </div>
  </div>
</template>

<style scoped lang="scss">
._panel-header-operate {
   img {
    transition: transform 0.2s;
    transform: scale(1);
    &:hover {
      transform: scale(1.1);
    }
  }
}
.panel-active.is-full-screen{
  position:absolute;
  top:0;
  left:1px;
  width:calc(100vw - 226px);
  height:100vh;
  z-index:10;
  background:#fff;
  transition:all .5s;
  box-sizing: border-box;
  &.is-collapse{
    width:calc(100vw - 66px);
  }
  ._panel-content{
    height:calc(100% - 52px);
    padding:16px;
  }
}
</style>

<style lang="scss">
.shadow-panel-1 {
  box-shadow: 0px 7px 21px 0px rgba(43, 122, 79, 0.05);
}
.shadow-panel-2 {
  box-shadow: 0px 8px 24px 0px rgba(43, 122, 79, 0.05);
}
</style>
